logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

List

Basic list display, which can carry text, lists, pictures, paragraphs.
Importimport { List } from "antd";
Sourcecomponents/list
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Examples

API

Common props ref:Common props

List

PropertyDescriptionTypeDefaultVersion
borderedToggles rendering of the border around the listbooleanfalse
dataSourceDataSource array for listany[]-
footerList footer rendererReactNode-
gridThe grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
headerList header rendererReactNode-
itemLayoutThe layout of listhorizontal | verticalhorizontal
loadingShows a loading indicator while the contents of the list are being fetchedboolean | SpinProps (more)false
loadMoreShows a load more contentReactNode-
localeThe i18n text including empty textobject{emptyText: No Data}
paginationPagination config, hide it by setting it to falseboolean | objectfalse
renderItemCustomize list item when using dataSource(item: T, index: number) => ReactNode-
rowKeyItem's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Keykeyof T | (item: T) => React.Key"key"
sizeSize of listdefault | large | smalldefault
splitToggles rendering of the split under the list itembooleantrue

pagination

Properties for pagination.

PropertyDescriptionTypeDefault
positionThe specify the position of Paginationtop | bottom | bothbottom
alignThe specify the alignment of Paginationstart | center | endend

More about pagination, please check Pagination.

List grid props

PropertyDescriptionTypeDefaultVersion
columnThe column of gridnumber-
gutterThe spacing between gridnumber0
xs<576px column of gridnumber-
sm≥576px column of gridnumber-
md≥768px column of gridnumber-
lg≥992px column of gridnumber-
xl≥1200px column of gridnumber-
xxl≥1600px column of gridnumber-

List.Item

PropertyDescriptionTypeDefaultVersion
actionsThe actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far rightArray<ReactNode>-
classNamesSemantic structure classNameRecord<actions | extra, string>-5.18.0
extraThe extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far rightReactNode-
stylesSemantic DOM styleRecord<actions | extra, CSSProperties>-5.18.0

List.Item.Meta

PropertyDescriptionTypeDefaultVersion
avatarThe avatar of list itemReactNode-
descriptionThe description of list itemReactNode-
titleThe title of list itemReactNode-

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
avatarMarginRightRight margin of avatarundefined | MarginRight<string | number>16
contentWidthWidth of contentstring | number220
descriptionFontSizeFont size of descriptionnumber14
emptyTextPaddingPadding of empty textundefined | Padding<string | number>16
footerBgBackground color of footerstringtransparent
headerBgBackground color of headerstringtransparent
itemPaddingPadding of itemstring12px 0
itemPaddingLGPadding of large itemstring16px 24px
itemPaddingSMPadding of small itemstring8px 16px
metaMarginBottomMargin bottom of metaundefined | MarginBottom<string | number>16
titleMarginBottomMargin bottom of titleundefined | MarginBottom<string | number>12
Global TokenHow to use?
Simple list

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the header and footer of list by setting header and footer property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Basic list

Basic list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Load more

Load more list with loadMore property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical

Set the itemLayout property to vertical to create a vertical list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Pagination Settings

List pagination can be used and set through the pagination property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Grid

Create a grid layout by setting the grid property of List.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Responsive grid list

Responsive grid list. The size property the is as same as Layout Grid.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Scrolling loaded

The example of infinite load with react-infinite-scroll-component.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
virtual list

An example of infinite & virtualized list via using rc-virtual-list.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Default Size
Header
  • [ITEM] Racing car sprays burning fuel into crowd.
  • [ITEM] Japanese princess to wed commoner.
  • [ITEM] Australian walks 100km after outback crash.
  • [ITEM] Man charged over missing wedding girl.
  • [ITEM] Los Angeles battles huge wildfires.
Footer
Small Size
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
Footer
Large Size
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
Footer
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • ant design part 0

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • ant design part 1

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • ant design part 2

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
ant design footer part
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 8
Pagination Position:
Pagination Align:
  • Ant Design Title 1

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 2

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 3

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • Ant Design Title 4

    Ant Design, a design language for background applications, is refined by Ant UED Team
  • 1
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
No data
No data

  • ant design part 0

    Ant Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • extra
    5.18.0
    set `extra` of List.Item
  • actions
    5.18.0
    set `actions` of List.Item